import { defineStore } from 'pinia';
import router from '@/router'
// 这是整个项目的布局页面。根据自己的项目替换就好
import Layout from "@/layout/index.vue";
import {RouteRecordRaw} from "vue-router";
 
export type MenuType = {
    path: string,
    title: string,
    component: string,
    redirect?: string,
    children?: Array<MenuType>
}
 
type RouterType = RouteRecordRaw & {
    hidden?: boolean;
    alwaysShow?: boolean;
}
 
export interface IPermissionState {
    routes: RouterType[]
    dynamicRoutes: RouterType[]
    menus: Array<MenuType>
}
 
function hasPermission<T>(roles: T[], route: RouterType) {
    if (route.meta && route.meta.roles) {
        return roles.some((role) => (route.meta?.roles as T[]).includes(role));
    }
    return true
}
 
const modules = import.meta.glob('../../views/**/*.vue')
const _import = (path: string) => () => import(`../../views/${path}.vue`)
 
const assembleRouter = (routers: any) => {
    const addRouter = routers.filter((router: any) => {
        (router.title && router.icon) && (router.meta = {
            title: router.title,
            // icon: router.icon,
            // alwaysShow: router.alwaysShow || false,
            // affix: router.affix || false,
        })
        if (router.component === 'Layout') {
            router.component = shallowRef(Layout)
        } else {
            if (import.meta.env.MODE === 'development') {
                router.component = _import(router.component)
            } else {
                router.component = modules[`../../views/${router.component}.vue`]
            }
        }
        if (router.children && router.children.length) {
            router.children = assembleRouter(router.children)
        }
        return true
 
    })
    return addRouter
}
 
export function filterAsyncRoutes(routes: RouterType[], roles: string[]) {
    const res: RouterType[] = []
 
    routes.forEach((route) => {
        const tmp = { ...route }
        if (hasPermission<string>(roles, tmp)) {
            if (tmp.children) {
                tmp.children = filterAsyncRoutes(tmp.children, roles)
            }
            res.push(tmp)
        }
    })
    return res
}
 
export const permissionModule = defineStore({
    id: 'permission',
    state(): IPermissionState{
        return {
            routes: [],
            dynamicRoutes: [],
            menus: []
        }
    },
    actions:{
        async getMenus() {
            try {
                // 这里由于不方便演示，所以我写的静态数据。换着自己对于的接口就好
                const list:MenuType[] = [
                    {
                        path: '/',
                        title: 'ts-super-web',
                        component: 'Layout',
                        redirect: '/home',
                        children: [
                            {
                                title: 'home',
                                path: 'home',
                                component: 'home'
                            },
                            {
                                title: 'home1',
                                path: 'home1',
                                component: 'home1'
                            },
                            {
                                path: 'login',
                                title: 'login',
                                component: 'login',
                            }
                        ]
                    },

                ]
                this.menus = list
                // 组件路由
                let addRouter = assembleRouter(this.menus)
                // addRouter = assembleRouterDelete(addRouter)
                // 动态添加菜单
                addRouter.forEach((ts: any) => {
                    router.addRoute(ts)
                })
            } catch (err) {
                return Promise.reject(err);
            }
        }
    }
})